<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    <input  v-model.number="inp1">
    <select v-model="opt">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input  v-model.number="inp2">=
    <span v-if="opt=='+'">{{inp1 + inp2}}</span>
    <span v-else-if="opt=='-'">{{inp1 - inp2}}</span>
    <span v-else-if="opt=='*'">{{inp1 * inp2}}</span>
    <span v-else="opt=='/'">{{inp1 / inp2}}</span>
    <br>
<div>{{opt}}</div>
    <input v-model="arr_name" type="text"><br>
    <input v-model="arr_link" type="text"><br>
    <input type="text" v-model="arr_desc"><br>
    <button v-on:click="add(arr_name,arr_link,arr_desc)">添加</button>
    <table :style="table_css" border="1">
        <thead>
            <tr>
                <th>#</th>
                <th>名称</th>
                <th>链接</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
          <!-- 使用 v-color="index" 或:style="index ? (index % 2 === 0 ? 'background-color:yellow;' : 'background-color:red;') : ''" -->
            <tr v-for="(item,index) in arr" :key="item.id"
             :style="index ? (index % 2 == 0 ? 'background-color:yellow;' : 'background-color:blue;') : ''"
             :class="{ 'hover-row': hoverIndex === index }"
             @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -1">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.link}}</td>
                <td>{{item.desc}}</td>
                <td><button v-on:click="del(index)">删除</button></td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    //自定义指令
    // Vue.directive('color', function (ele, bindimg) {
    //     if (bindimg.value % 2 == 0) {
    //         ele.style.backgroundColor='red'
    //     }else{
    //         ele.style.backgroundColor='yellow'
    //     }
    // })
    new Vue({
        el: '#app',
        data: {
            name: '<h1>老黑你好</h1>',
            img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.aVuzqVPJjP_s4wwnIfZhiwHaKX?w=211&h=295&c=8&rs=1&qlt=90&r=0&o=6&dpr=1.3&pid=3.1&rm=2',
            height: '200px',
            width: '200px',
            inp1: '',
            inp2: '',
            opt: '+',
            num: 50,
            table_css: 'width: 400px;  border-collapse: collapse;',
            arr_name: '',
            arr_link: '',
            arr_desc: '',
            hoverIndex:-1,
            arr: [{
                id: 1,
                name: '老黑',
                link: 'www.baidu.com',
                desc: '老黑你好'
            }, {
                id: 2,
                name: '王琳',
                link: 'www.baidu.com',
                desc: '王琳你好'
            }, {
                id: 3,
                name: '石浩',
                link: 'www.baidu.com',
                desc: '石浩你好'
            }, {
                id: 4,
                name: '张三',
                link: 'www.baidu.com',
                desc: '张三你好'
            },],
        },
        methods: {
            del(index) {
                this.arr.splice(index, 1)

                console.log(index);
            },
            add(name, link, desc) {
                console.log(name, link, desc);
                this.arr.push({
                    id: this.arr.length + 1,
                    name: name,
                    link: link,
                    desc: desc
                })
            },
            // shu(index){
            //     console.log(index);
                
            // }
        }
    })

</script>
<style>
      .hover-row {
            background-color: darkblue;
        }
</style>